<template>
  <div class="componentBox">
    <van-tabs v-model="active" @click="onClick">
      <van-tab v-for="item in photoList" :key="item.id" :name="item.id" :title="item.title" >
        <div>
          <ul>
            <li v-for="(item,id) in imageList" :key="id" class="imgBox" @click="imgClick(item.id)">
              <img v-lazy='item.img_url' />
              <div class="botInfo">
                <p>{{item.title}}</p>
                <p>{{item.zhaiyao}}</p>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      photoList: [],
      imageList: []

    }
  },
  created () {
    this.getPhotoList()
    this.onClick(0)
    // this.chengeCarNum()
  },
  methods: {
    // 进网页就刷新购物车图标的数量，这个方法需要等到购物车组件完成后在进行编写
    // chengeCarNum () {
    //   // 得到localstorage中的值
    //   let getLocal = JSON.parse(window.localStorage.getItem('car'))
    //   // 如果为空等于一个[],避免为空foreach错误 ,往里push就直接是[{}]了
    //   getLocal || (getLocal = [])
    //   var counts = 0
    //   // 得到所有count值
    //   getLocal.forEach(item => {
    //     counts += item.count
    //   })
    //   this.$store.commit('initCarNum', counts)
    // },
    async getPhotoList () {
      let{ data: res } = await this.$http.get('api/getimgcategory')
      if (res.status !== 0) return this.$notify({ type: 'danger', message: '获取图片分类数据失败' })
      this.photoList = res.message
      const all = { title: '全部', id: '0' }
      this.photoList.unshift(all)
    },
    async onClick (name) {
      let{ data: res } = await this.$http.get(`api/getimages/${name}`)
      if (res.status !== 0) return this.$notify({ type: 'danger', message: '获取图片列表数据失败' })
      this.imageList = res.message
    },
    imgClick (id) {
      this.$router.push(`/picShare/info?id=${id}`);
      this.$store.commit('changeCommentId', id);
    }
  },
  computed: {
    imageSrcList () {
      const imageslist = []
      this.imageList.forEach(i => {
        imageslist.push(i.img_url)
      })
      return imageslist
    }
  }

}
</script>

<style lang="less" scoped>
  .imgBox{
    position: relative;
    margin: 8px;
    border-radius: 5px;
    overflow: hidden;
    height: 300px;
    img{
      width:100%;
      height: 300px;
    }
    .botInfo{
      position:absolute;
      bottom:0;
      left: 0;
      background: rgba(0,0,0,.4);
      color: #fff;
      padding: 0 10px;
      height: 75px;
      p{
        margin: 5px 0;
        font-size: 12px;
      }
    }
  }
</style>
